<template>
  <div class="orgList-container">
    <div class="orgList-content">
      <page-header type="userLog" @searchChange="searchData"></page-header>
      <pagination-table
        :tableData="pageData.listData"
        @sort-change="sortChange"
      >
        <XMTableColumn label="操作日期" prop="areaName"></XMTableColumn>
        <XMTableColumn
          label="日志类型"
          sortable="custom"
          prop="areaCode"
        ></XMTableColumn>
        <XMTableColumn label="日志内容" prop="areaCode"></XMTableColumn>
      </pagination-table>
    </div>
  </div>
</template>
<script>
  import PageHeader from '@/components/PageHeader'
  import PaginationTable from '@/components/PaginationTable'
  import { getAutherList } from '@/api/setting'
  import { onBeforeMount, reactive } from '@vue/runtime-core'
  export default {
    components: { PaginationTable, PageHeader },
    data() {
      return {
        listData: {
          totalRecords: 3,
          data: [
            { areaName: '1', areaCode: '1' },
            { areaName: '2', areaCode: '2' },
          ],
        },
      }
    },
    setup() {
      const pageData = reactive({ listData: [], search: {} })

      async function loadData() {
        // pageData.listData = await getAutherList(pageData.search)
        pageData.listData = {
          totalRecords: 3,
          data: [
            { areaName: '1', areaCode: '1' },
            { areaName: '2', areaCode: '2' },
          ],
        }
      }

      function sortChange(column, prop, order) {
        console.log('column =' + column + ' prop =' + prop + 'order =' + order)
      }

      function searchData(params) {
        console.log('params' + JSON.stringify(params))
        // pageData.search = params
        // loadData()
      }

      onBeforeMount(() => {
        loadData()
      })
      return {
        sortChange,
        pageData,
        searchData,
      }
    },
    methods: {
      async loadData() {
        console.log('loadData pre')
        const ret = await getAutherList()
        console.log('loadData = ' + JSON.stringify(ret))
      },
    },
  }
</script>
<style lang="scss" scoped>
  .orgList-container {
    margin: 32px;

    .orgList-content {
      background-color: white;
      overflow: hidden;

      .el-divider--horizontal {
        margin: 12px 2px;
      }
    }
  }
</style>
